<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud'
import { baseInfo, animalCount, topTen, plantCount } from '@/utils/api.js'
import FullMars3d from '@/components/common/fullMars3d.vue'
import LeftItem from '@/components/LeftItem.vue'
import RightItem from '@/components/RightItem.vue'
import LeftTitle from '@/components/LeftT.vue'
import RightTitle from '@/components/RightT.vue'
import BsqLine from '@/components/line.vue'
import HeadLine from '@/components/headline.vue'
import xh1 from '@/assets/images/xh1.png'
import xh2 from '@/assets/images/xh2.png'
import xh3 from '@/assets/images/xh3.png'
import xh4 from '@/assets/images/xh4.png'
const mad = ref(null)
let areaId = ''
let lt1 = ref({
    Cname: "全部种类数量统计",
    Ename: "Total category statistics",
    num: 0,
    isnum: false
})

let lt2 = ref({
    Cname: "动物种类统计",
    Ename: "Animal species statistics",
    num: 0,
    isnum: false
})

let lt3 = ref({
    Cname: "动物保护等级统计",
    Ename: "Animal protection level statistics",
    num: 0,
    isnum: false
})

let lt4 = ref({
    Cname: "动物IUCN红色名录统计",
    Ename: "IUCN Red List of animal statistics",
    num: 0,
    isnum: false
})

let rt1 = {
    Cname: "发现频次最多top10物种",
    Ename: "Top10 most frequently found species",
}

let rt2 = {
    Cname: "植物保护等级统计",
    Ename: "Plant protection level statistics",
}

let rt3 = {
    Cname: "植物IUCN红色名录统计",
    Ename: "IUCN Red List of plants statistics",
}



const tclist = ref([
    {
        ico: xh1,
        name: "全部",
        num: 0,
        color: "#2EFFF2",
    },
    {
        ico: xh2,
        name: "动物",
        num: 0,
        color: "#34CEFF",
    },
    {
        ico: xh3,
        name: "植物",
        num: 0,
        color: "#FFF27F",
    },
    {
        ico: xh4,
        name: "真菌",
        num: 0,
        color: "#48FA69",
    },
])

const getbaseInfo = async () => {
    let res = await baseInfo(areaId)
    if (res.code == '200') {
        tclist.value[0].num = res.data.totalNum;
        tclist.value[1].num = res.data.aninalNum;
        tclist.value[2].num = res.data.plantNum;
        tclist.value[3].num = res.data.fungusNum;
    }
}

const getanimalCount = async () => {
    let res = await animalCount(areaId);
    let fl = res.data.fenleiCount;
    let x = ['兽类', '鸟类', '昆虫', '蛛形', '鱼类', '爬行', '两栖'];
    let y = [fl.shouleiNum, fl.niaoleiNum, fl.kunchongNum, fl.zhuxingNum, fl.yuleiNum, fl.paxingNum, fl.liangqiNum]
    drawBar('bar', x, y);
    let pl = res.data.protectLevelCount;
    var pie = [
        { name: '国家Ⅰ级', value: pl.oneLevel },
        { name: '国家Ⅱ级', value: pl.twoLevel },
        { name: '其他', value: pl.otherLevel }
    ];
    drawPie('bar2', pie);
    let el = res.data.endangeredLevelCount;
    let x1 = ['极危', '濒危', '易危', '近危'];
    let y1 = [el.jiwei, el.binwei, el.yiwei, el.jinwei];

    drawLine('bar3', x1, y1);
}

const getplantCount = async () => {
    let res = await plantCount(areaId);

    let pl = res.data.protectLevelCount;
    var pie = [
        { name: '国家Ⅰ级', value: pl.oneLevel },
        { name: '国家Ⅱ级', value: pl.twoLevel },
        { name: '其他', value: pl.otherLevel }
    ];
    drawPie('bar5', pie);
    let el = res.data.endangeredLevelCount;
    let x1 = ['极危', '濒危', '易危', '近危'];
    let y1 = [el.jiwei, el.binwei, el.yiwei, el.jinwei];

    drawLine('bar6', x1, y1);
}

const gettopTen = async () => {
    let res = await topTen(areaId)
    if (res.code == '200') {
        let x = [], y = [];
        for (let k in res.data) {
            x.push(k);
            y.push(res.data[k])
        }

        drawBar('bar4', x, y);
    }
}

const drawBar = (demo, x, y) => {
    if (document.getElementById(demo) == null) {
        return
    }
    echarts.dispose(document.getElementById(demo));
    let myChart = echarts.init(document.getElementById(demo));
    let option = {
        xAxis: {
            type: "category",
            axisLabel: {
                color: "#fff",
                rotate: 45
            },
            axisTick: {
                show: false  // 设置为false即可隐藏刻度线
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'  // 设置轴线颜色为红色
                }
            },
            data: x,
        },
        yAxis: {
            type: "value",
            axisLabel: {
                color: "#fff",
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)",
                },
            },
        },
        grid: {
            top: "13%",
            left: "10%",
            right: "1%",
            bottom: "30%",
        },
        series: [
            {
                data: y,
                type: "bar",
                showBackground: true,
                label: {
                    show: true,
                    position: "top",
                    color: "#fff",
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: "rgba(0, 41, 255, 0)",
                        },
                        {
                            offset: 1,
                            color: "rgba(18, 255, 255, 0.8)",
                        },
                    ])
                },
                backgroundStyle: {
                    color: "rgba(255, 255, 255, 1)",
                    opacity: 0.1,
                },
            },
        ],
    };
    myChart.setOption(option);
    setTimeout(function () {
        myChart.resize();
    }, 100);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

const drawPie = (demo, data) => {
    if (document.getElementById(demo) == null) {
        return
    }
    echarts.dispose(document.getElementById(demo));
    let myChart = echarts.init(document.getElementById(demo));
    var dataHigh = data[0].value;
    var dataMiddle = data[1].value;
    var dataLow = data[2].value;
    var total = 0;
    for (var i = 0; i < data.length; i++) {
        total += data[i].value;
    }

    var perHigh = ((dataHigh / total) * 100).toFixed(0) + '%';
    var perMiddle = ((dataMiddle / total) * 100).toFixed(0) + '%';
    var perLow = ((dataLow / total) * 100).toFixed(0) + '%';

    let option = {
        title: [
            {
                text: '国家Ⅰ级',
                bottom: '0',
                left: '9%',
                textAlign: 'center',
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.8)',
                    fontSize: 14,
                    fontWeight: 'normal',
                    textAlign: 'center',
                    rich: {
                        num: {
                            color: '#4d71df',
                            fontSize: 14
                        }
                    }
                }
            },
            {
                text: '国家Ⅱ级',
                bottom: '0',
                left: '44%',
                textAlign: 'center',
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.8)',
                    fontSize: 14,
                    fontWeight: 'normal',
                    rich: {
                        num: {
                            color: '#32c78d',
                            fontSize: 14
                        }
                    }
                }
            },
            {
                text: '其他',
                bottom: '0',
                left: '79%',
                textAlign: 'center',
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.8)',
                    fontSize: 14,
                    fontWeight: 'normal',
                    textAlign: 'center',
                    rich: {
                        num: {
                            color: '#4cb9cd',
                            fontSize: 14
                        }
                    }
                }
            }
        ],
        graphic: [
            {
                type: 'text',
                top: '45%',
                left: '7%',
                style: {
                    text: perHigh,
                    font: '14px "microsoft yahei"',
                    textAlign: 'center',
                    fill: '#FCC80F'
                }
            },
            {
                type: 'text',
                top: '45%',
                left: '42%',
                style: {
                    text: perMiddle,
                    font: '14px "microsoft yahei"',
                    textAlign: 'center',
                    fill: '#0AD0A1'
                }
            },
            {
                type: 'text',
                top: '45%',
                left: '76%',
                style: {
                    text: perLow,
                    font: '14px "microsoft yahei"',
                    textAlign: 'center',
                    fill: '#FD51A4'
                }
            }
        ],
        tooltip: {
            show: false
        },
        series: [
            {
                name: '国家Ⅰ级',
                type: 'pie',
                center: ['10%', '50%'],
                radius: ['40%', '50%'],
                startAngle: 180, //起始角度
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                hoverAnimation: false,
                emphasis: false,
                data: [
                    {
                        value: dataHigh,
                        name: '',
                        itemStyle: {
                            normal: {
                                color: '#FCC80F'
                            }
                        }
                    },
                    {
                        name: '',
                        itemStyle: {
                            emphasis: {
                                color: '#e6e9f0'
                            },
                            normal: {
                                color: '#e6e9f0'
                            }
                        },
                        value: total - dataHigh // 总数减去当前项数(灰色占比)
                    }
                ]
            },
            {
                name: '国家Ⅱ级',
                type: 'pie',
                center: ['45%', '50%'],
                radius: ['40%', '50%'],
                startAngle: 180, //起始角度
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                hoverAnimation: false,
                data: [
                    {
                        value: dataMiddle,
                        name: '',
                        itemStyle: {
                            normal: {
                                color: '#0AD0A1'
                            }
                        }
                    },
                    {
                        name: '',
                        itemStyle: {
                            emphasis: {
                                color: '#e6e9f0'
                            },
                            normal: {
                                color: '#e6e9f0'
                            }
                        },
                        value: total - dataMiddle // 总数减去当前项数(灰色占比)
                    }
                ]
            },
            {
                name: '其他',
                type: 'pie',
                center: ['80%', '50%'],
                radius: ['40%', '50%'],
                startAngle: 180, //起始角度
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                hoverAnimation: false,
                data: [
                    {
                        value: dataLow,
                        name: '',
                        itemStyle: {
                            normal: {
                                color: '#FD51A4'
                            }
                        }
                    },
                    {
                        name: '',
                        itemStyle: {
                            emphasis: {
                                color: '#e6e9f0'
                            },
                            normal: {
                                color: '#e6e9f0'
                            }
                        },
                        value: total - dataLow // 总数减去当前项数(灰色占比)
                    }
                ]
            }
        ]
    };
    myChart.setOption(option);
    setTimeout(function () {
        myChart.resize();
    }, 100);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

const drawLine = (demo, x, y) => {
    if (document.getElementById(demo) == null) {
        return
    }
    echarts.dispose(document.getElementById(demo));
    let myChart = echarts.init(document.getElementById(demo));

    let option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: x,
            axisLabel: {
                color: "#fff"
            },
            axisTick: {
                show: false  // 设置为false即可隐藏刻度线
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'  // 设置轴线颜色为红色
                }
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: "#fff",
                rotate: 45
            },
            axisTick: {
                show: false  // 设置为false即可隐藏刻度线
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'  // 设置轴线颜色为红色
                }
            },
        },
        grid: {
            top: "15%",
            left: "10%",
            right: "5%",
            bottom: "20%",
        },
        series: [
            {
                data: y,
                type: 'line',
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(255, 242, 127, 0.6)'
                        },
                        {
                            offset: 1,
                            color: '#fff'
                        }
                    ])
                },
                lineStyle: {
                    color: '#FFF27F'  // 设置折线的颜色为蓝色
                }, itemStyle: {
                    color: '#FFF27F'  // 设置拐点的颜色为绿色
                },
                smooth: true
            }
        ]
    };

    myChart.setOption(option);
    setTimeout(function () {
        myChart.resize();
    }, 100);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    getbaseInfo();
    getanimalCount();
    gettopTen();
    getplantCount();
})

</script>
<template>
    <div>
        <full-mars3d ref="mad" />
        <left-item>
            <left-title :msg="lt1" />
            <div class="bzxq">
                <div v-for="(item, index) in tclist" :key="index">
                    <div><img :src="item.ico" alt="" /></div>
                    <div :style="{ color: item.color }">
                        <span>{{ item.num }}</span>
                        <br />
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <bsq-line style="height: .4rem;" />
            <left-title :msg="lt2" />
            <div class="li-bar" id="bar"></div>
            <bsq-line style="height: .4rem;" />
            <left-title :msg="lt3" />
            <div class="li-bar" id="bar2"></div>
            <bsq-line style="height: .4rem;" />
            <left-title :msg="lt4" />
            <div class="li-bar" id="bar3"></div>
        </left-item>
        <right-item>
            <right-title :msg="rt1" />
            <div style="width: 100%;height: 2rem;" id="bar4"></div>
            <bsq-line style="height: .4rem;" />
            <right-title :msg="rt2" />
            <div class="li-bar" style="height: 1.7rem;" id="bar5"></div>
            <bsq-line style="height: .4rem;" />
            <right-title :msg="rt3" />
            <div class="li-bar" style="height: 1.6rem;" id="bar6"></div>
        </right-item>
    </div>
</template>
<style scoped>
.bzxq {
    width: 100%;
    margin-top: .16rem;
    /* height: 1rem; */
    display: flex;
    flex-shrink: 0;
}

.bzxq>div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.li-bar {
    width: 100%;
    height: 1.2rem;
}
</style>